<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('')"/>
    <meta charset="UTF-8">
    <th:block th:include="include :: ele-vue"/>
</head>
<style>
    .el-row {
        background-color: #1844a8!important;
    }
    .cdcss {
        background-color: #1844a8!important;
    }
</style>
<body>
<!--编写标签-->
<div id="home" style=" background-color: #e5e5e6;">
<div>
    <div class="block">
        <el-carousel height="500px">
            <el-carousel-item v-for="item in images" :key="item.id">
                <img :src="item.url">
            </el-carousel-item>
        </el-carousel>
    </div>
    <!--======================================通知消息================================================-->
    <!--<div style="display: flex; justify-content: center;    position: absolute;  margin-left: 23%;">
        <button class="tzlx">系统通知</button>
        <button class="tzlx">系统通知</button>
        <button class="tzlx">系统通知</button>
        <button class="tzlx">系统通知</button>
    </div>
    <div style="display: flex; justify-content: center;    position: absolute;  margin-left: 23%;    margin-top: 150px;">
        <button class="qiu" id="qiu1"></button>
        <button class="qiu" id="qiu2"></button>
        <button class="qiu" id="qiu3"></button>
        <button class="qiu" id="qiu4"></button>
    </div>
    <div style="display: flex; justify-content: center;    margin-top: 150px;">
        <div>
            <button class="zjt" @click="leftup"></button>
        </div>
        <div><img src="img/Line.png" style="margin-top: 6px;"/></div>
        <div>
            <button class="yjt" @click="rightup"></button>
        </div>
    </div>
    <div style="margin-top: 0px; position: absolute;margin-left: 23%;">
        <span class="rq" v-html="notice.notice0time"></span>
        <span class="rq" v-html="notice.notice1time"></span>
        <span class="rq" v-html="notice.notice2time"></span>
        <span class="rq" v-html="notice.notice3time"></span>
    </div>
    <div style="display: flex; justify-content: center;    position: absolute;  margin-left: 23%;    margin-top: 25px;">
        <div class="kp notice01" id="notice01"><p class="zt notice01">{{notice.notice0}}</p><a @click="selectnotice(0)"
                                                                                               class="zt1 notice01"
                                                                                               v-if="notice.notice0!=''">查看详情>></a>
        </div>
        <div class="kp notice02" id="notice02"><p class="zt notice02">{{notice.notice1}}</p><a @click="selectnotice(1)"
                                                                                               class="zt1 notice02"
                                                                                               v-if="notice.notice1!=''">查看详情>></a>
        </div>
        <div class="kp notice03" id="notice03"><p class="zt notice03">{{notice.notice2}}</p><a @click="selectnotice(2)"
                                                                                               class="zt1 notice03"
                                                                                               v-if="notice.notice2!=''">查看详情>></a>
        </div>
        <div class="kp notice04" id="notice04"><p class="zt notice04">{{notice.notice3}}</p><a @click="selectnotice(3)"
                                                                                               class="zt1 notice04"
                                                                                               v-if="notice.notice3!=''">查看详情>></a>
        </div>
    </div>
</div>-->
   <!-- display: flex;-->
    <div style="    display: none;
    justify-content: center;
    position: absolute;
    margin-left: 17%;">
        <button style="width: 18px;background-color: #e5e5e6;border: 0px;background-image: url('img/jiantou1.png');background-position: center center;background-repeat: no-repeat;" @click="leftup"></button>
        <div class="kp1 notice01" id="notice01" style="background-color: #e2e2e3"><p style="color: #373d41;
                                                text-align: left;
                                                padding: 14px 14px 0 14px;
                                                font-size: 16px;">{{notice.notice0}}</p>
            <div><span >{{notice.notice0time}}</span></div>
            <div  v-if="notice.notice0!=''" style="
                    height: 21px;
                    border: 1px solid rgb(61, 110, 224);
                    margin: 0px auto;
                    text-align: center;
                    padding-top: 1px;">
              <a @click="selectnotice(0)" >查看详情</a>
            </div>
        </div>
        <div class="kp1 notice02" id="notice02" style="background-color: #ebebec"><p style="color: #373d41;
                                                text-align: left;
                                                padding: 14px 14px 0 14px;
                                                font-size: 16px;">{{notice.notice1}}</p>
            <div><span >{{notice.notice1time}}</span></div>
            <div v-if="notice.notice1!=''" style="
                    height: 21px;
                    border: 1px solid rgb(61, 110, 224);
                    margin: 0px auto;
                    text-align: center;
                    padding-top: 1px;">
             <a @click="selectnotice(1)">查看详情</a>
            </div>
        </div>
        <div class="kp1 notice03" id="notice03" style="background-color: #e2e2e3"><p style="color: #373d41;
                                                text-align: left;
                                                padding: 14px 14px 0 14px;
                                                font-size: 16px;">{{notice.notice2}}</p>
            <div><span >{{notice.notice2time}}</span></div>
            <div v-if="notice.notice2!=''" style="
                    height: 21px;
                    border: 1px solid rgb(61, 110, 224);
                    margin: 0px auto;
                    text-align: center;
                    padding-top: 1px;">
            <a @click="selectnotice(2)"  >查看详情</a>
            </div>
        </div>
        <div class="kp1 notice04" id="notice04" style="background-color: #ebebec"><p style="color: #373d41;
                                                text-align: left;
                                                padding: 14px 14px 0 14px;
                                                font-size: 16px;">{{notice.notice3}}</p>
            <div>
            <span >{{notice.notice3time}}</span>
            </div>
            <div v-if="notice.notice3!=''" style="
                    height: 21px;
                    border: 1px solid rgb(61, 110, 224);
                    margin: 0px auto;
                    text-align: center;
                    padding-top: 1px;">
            <a @click="selectnotice(3)" >查看详情</a>
            </div>
        </div>
        <button style="width: 18px;background-color: #e5e5e6;border: 0px;background-image: url('img/jiantou2.png');background-position: center center;background-repeat: no-repeat;" @click="rightup"></button>
    </div>
</div>
    <!--======================================产品介绍================================================-->
    <div style="background-color: #F5F5F5">
        <div style="margin-top: 0px">
            <div style="height:50px;width: 100%;"></div>
            <div style="display: flex;justify-content: center;width: 100%;">
                <div style="margin-top: 10px;margin-right: 100px;"><img src="./img/z.png"></div>
                <div style="font-size: 27px;">产品介绍</div>
                <div style="margin-top: 10px;margin-left: 100px;"><img src="./img/y.png"></div>
            </div>
            <div style="height:50px;width: 100%;"></div>
            <div style="display:flex;justify-content: center">
                <div style="margin: 20px;width: 380px;box-shadow: 13px 12px 13px rgba(0, 0, 0, 0.3);">
                    <div class="cpjskpt"><img src="./img/f9.png">
                        <p class="cp">数值预报产品</p></div>
                    <div class="cpjskp xbk">GFS全球业务化大气数值预报产品</div>
                    <div class="cpjskp xbk">欧洲中心大气模式高分辨率产品</div>
                    <div class="cpjskp xbk">欧洲中心海浪模式产品</div>
                    <div class="cpjskp"><a onclick="sz()">更多>></a></div>
                </div>
                <div style="margin: 20px;width: 380px;box-shadow: 13px 12px 13px rgba(0, 0, 0, 0.3);">
                    <div class="cpjskpt"><img src="./img/f10.png">
                        <p class="cp">综合预报产品</p></div>
                    <div class="cpjskp xbk">预报中心常规会商材料</div>
                    <div class="cpjskp xbk">中国近海格点化预报海面风产品</div>
                    <div class="cpjskp xbk">近岸基础单元预报产品-海浪</div>
                    <div class="cpjskp"><a onclick="zh()">更多>></a></div>
                </div>
                <div style="margin: 20px;width: 380px;box-shadow: 13px 12px 13px rgba(0, 0, 0, 0.3);">
                    <div class="cpjskpt"><img src="./img/f11.png">
                        <p class="cp">分析类产品</p></div>
                    <div class="cpjskp xbk">西北太海浪实况分析产品</div>
                    <div class="cpjskp xbk">NCEP全球海温分析资料</div>
                    <div class="cpjskp xbk">NEAR-GOOS海温分析资料</div>
                    <div class="cpjskp"><a onclick="fx()">更多>></a></div>
                </div>
            </div>
            <div style='width: 100%;height: 600px;background-image: url("./img/f2.png");margin-top: 100px;display: flex;justify-content: center'>
                <div id="jjkp1" class="jjkp" style='background-image: url("./img/f1z.png");box-shadow: 13px 12px 13px rgba(0, 0, 0, 0.3);'>
                    <div id="ptts1" class="ptts">
                        <div class="pttszt">国家海洋预报云特色平台</div>
                        <div id="jjkp11" style="height: 65px;background-color: #ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本平台基于阿里云服务器，1）能实现海洋预报产品数据的采集、存储及管理，服务于各地用户；2）实现分发海洋预报产品的资源目录管理、产品发布管理和数据检索。</div>
                    </div>
                </div>
                <div id="jjkp2" class="jjkp" style='background-image: url("./img/f1y.png");box-shadow: 13px 12px 13px rgba(0, 0, 0, 0.3);'>
                    <div id="ptts2" class="ptts">
                        <div class="pttszt">国家海洋预报云平台定位</div>
                        <div id="jjkp22" style="height: 65px;background-color: #ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;平台的定位是实现国内海洋预报机构数值预报产品的分发和国外常用数值产品的准实时下载与共享，达到统一管理、提高效率的目的。</div>
                    </div>
                </div>
            </div>
        </div>
        <!--======================================服务说明================================================-->
        <div style="height:50px;width: 100%;"></div>
        <div style="display: flex;justify-content: center;width: 100%;">
            <div style="margin-top: 10px;margin-right: 100px;"><img src="./img/z.png"></div>
            <div style="font-size: 27px;">服务说明</div>
            <div style="margin-top: 10px;margin-left: 100px;"><img src="./img/y.png"></div>
        </div>
        <div style="height:50px;width: 100%;"></div>
        <div style="display: flex;justify-content: center">
            <div style='background-image: url("./img/f7z.png");width: 590px;height: 195px;margin-right: 10px'>
                <div class="ztcx">查询预览服务</div>
                <div class="ztcxx">综合大数据分析结果云平台提供专业的数据服务功能</div>
            </div>
            <div style='background-image: url("./img/f7y.png");width: 590px;height: 195px;margin-left: 10px'>
                <div class="ztcx">数据订阅服务</div>
                <div class="ztcxx">综合大数据分析结果云平台提供专业的数据服务功能</div>
            </div>
        </div>
        <!--======================================下载总数================================================-->
        <div class="cont5_box" style="margin-top: 51px;">
            <div class="cont5">
                <div class="xinxi">截至目前，用户在国家海洋预报云服务平台累计下载文件 {{numall}} 次</div>
            </div>
        </div>

    <!--======================================下载统计================================================-->
    <div>
        <div style="display: flex;justify-content: center;width: 100%;margin-top: 51px;">
            <div style="margin-top: 10px;margin-right: 100px;"><img src="./img/z.png"></div>
            <div style="font-size: 27px;">下载统计</div>
            <div style="margin-top: 10px;margin-left: 100px;"><img src="./img/y.png"></div>
        </div>
        <div class="cont6" style="margin-top: 51px;">
            <div class="clearfix"></div>
            <h3 style="font-size: 23px;text-align: center;margin-bottom: 20px;color: #666;font-weight: bold;width: 50%;float:left">
                过去365天各机构下载活跃度</h3>
            <h3 style="font-size: 23px;text-align: center;;margin-bottom: 20px;color: #666;font-weight: bold;width: 50%;float:left">
                机构下载量-Top10</h3>
            <div id="mapEchart" class="ditu_box" style="border: 1px solid #e5e5e5;float: left">
                <iframe src="/home/statistics/xztjmap" style="    border: 0px;width: 100%;height: 103%;"></iframe>
            </div>
            <div id="barEchart" class="ditu_box" style="border: 1px solid #e5e5e5;float: left">
                <iframe src="/home/statistics/histogramqd" style="border: 0px;width: 100%;height: 103%;"></iframe>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    </div>
</div>

<div id="footer"></div>
</body>

<th:block th:include="include :: footer"/>

<script>
    var id = '-1';
    var prefix = ctx + "home";
  //  console.log(prefix)
    // 创建vue
    new Vue({
        // 控制的标签容器
        el: '#home',
        // 交互的数据
        data() {
            return {
                images: [
                    {
                        id: 1,
                        url: './img/banner1.png'
                    },
                    {
                        id: 2,
                        url: './img/banner2.png'
                    },
                    {
                        id: 3,
                        url: './img/banner3.png'
                    }
                ],
                page: 0,
                notice: {
                    notice0: '',
                    notice0time: '',
                    notice0id: '',
                    notice1: '',
                    notice1time: '',
                    notice1id: '',
                    notice2: '',
                    notice2time: '',
                    notice2id: '',
                    notice3: '',
                    notice3time: '',
                    notice3: ''
                },
                getnumall:'/home/getnumall',
                numall:0
            };
        },
        mounted() {
            //加载
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
            });
            /**
             * 渲染通知消息
             */
            this.getnotice(this.page);
            /**
             * 获取下载总量
             */
            this.getNumAll();
            /**
             * 渲染底部
             */
            this.footer();

            loading.close();
        },
        methods: {
            /**
             * 获取通知消息
             * @param page
             */
            getnotice(page) {
               // console.log("渲染")
                that_ = this
                $.post(prefix + "/notice", {page: page}, function (data) {
                  //  console.log(data)
                    if (data.data.length === 0) {
                        that_.$message({
                            message: '当前最后一页',
                            type: 'warning'
                        });
                    } else {
                        if (data.data.length === 1) {
                            that_.notice.notice0id = data.data[0].id
                            that_.notice.notice0 = that_.jqzf(data.data[0].description)
                            that_.notice.notice1 = ''
                            that_.notice.notice2 = ''
                            that_.notice.notice3 = ''
                            that_.notice.notice0time = data.data[0].createDate //that_.numztime(data.data[0].createDate)
                            that_.notice.notice1time = ''
                            that_.notice.notice2time = ''
                            that_.notice.notice3time = ''
                        }
                        if (data.data.length === 2) {
                            that_.notice.notice0id = data.data[0].id
                            that_.notice.notice1id = data.data[1].id
                            that_.notice.notice0 = that_.jqzf(data.data[0].description)
                            that_.notice.notice1 = that_.jqzf(data.data[1].description)
                            that_.notice.notice2 = ''
                            that_.notice.notice3 = ''
                            that_.notice.notice0time = that_.numztime(data.data[0].createDate)
                            that_.notice.notice1time = that_.numztime(data.data[1].createDate)
                            that_.notice.notice2time = ''
                            that_.notice.notice3time = ''
                        }
                        if (data.data.length === 3) {
                            that_.notice.notice0id = data.data[0].id
                            that_.notice.notice1id = data.data[1].id
                            that_.notice.notice2id = data.data[2].id
                            that_.notice.notice0 = that_.jqzf(data.data[0].description)
                            that_.notice.notice1 = that_.jqzf(data.data[1].description)
                            that_.notice.notice2 = that_.jqzf(data.data[2].description)
                            that_.notice.notice3 = ''
                            that_.notice.notice0time = that_.numztime(data.data[0].createDate)
                            that_.notice.notice1time = that_.numztime(data.data[1].createDate)
                            that_.notice.notice2time = that_.numztime(data.data[2].createDate)
                            that_.notice.notice3time = ''
                        }
                        if (data.data.length === 4) {
                            that_.notice.notice0id = data.data[0].id
                            that_.notice.notice1id = data.data[1].id
                            that_.notice.notice2id = data.data[2].id
                            that_.notice.notice3id = data.data[3].id
                            that_.notice.notice0 = that_.jqzf(data.data[0].description)
                            that_.notice.notice1 = that_.jqzf(data.data[1].description)
                            that_.notice.notice2 = that_.jqzf(data.data[2].description)
                            that_.notice.notice3 = that_.jqzf(data.data[3].description)
                            that_.notice.notice0time = that_.numztime(data.data[0].createDate)
                            that_.notice.notice1time = that_.numztime(data.data[1].createDate)
                            that_.notice.notice2time = that_.numztime(data.data[2].createDate)
                            that_.notice.notice3time = that_.numztime(data.data[3].createDate)
                        }
                    }
                });
            },
            /**
             * 通知消息前一页
             */
            leftup() {
                //加载
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });

                if (this.page === 0) {//如果是第一页查第一页
                    this.getnotice(0);
                    that_.$message({
                        message: '当前第一页',
                        type: 'warning'
                    });
                } else {
                    this.page = this.page - 4;
                    if (this.page >= 0) {
                        this.getnotice(this.page);
                    } else {
                        return;
                    }
                }
                loading.close();
            },
            /**
             * 通知消息后一页
             */
            rightup() {
                //加载
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255, 255, 255, 0.7)'
                });
                if (this.page >= 0) {//如果是第一页+4
                    this.page = this.page + 4;
                    this.getnotice(this.page);
                }
                loading.close();
            },
            /**
             * 截取字符
             */
            jqzf(string) {
                if (string.length > 20) {
                    return string.substring(0, 20) + "..."
                }
            },
            /**
             * 通知消息详情
             * inxex 当前页第几个查看详情
             */
            selectnotice(index) {
                var data = '';
                if (index === 0)
                    data = this.notice.notice0id
                if (index === 1)
                    data = this.notice.notice1id
                if (index === 2)
                    data = this.notice.notice2id
                if (index === 3)
                    data = this.notice.notice3id
              //  console.log(data);
                $('#test').load("/home/notice");
                // 设置键名为"id"，保存到缓存，用于跳转到平台公告页面使用判断是否是查看详情 如果是id就是进入详情，如果是-1 就是正常像是公告列表
                sessionStorage.setItem("id", data);
            },
            /**
             * 时间戳转时间字符串
             * @param timestamp
             * @returns {string}
             */
            numztime(timestamp) {
                let date = new Date(timestamp);
                let year = date.getFullYear();
                let month = ("0" + (date.getMonth() + 1)).slice(-2);
                let day = ("0" + date.getDate()).slice(-2);
                let hours = ("0" + date.getHours()).slice(-2);
                let minutes = ("0" + date.getMinutes()).slice(-2);
                let seconds = ("0" + date.getSeconds()).slice(-2);

                return `${year}年${month}月${day}日`;
              /*  return "<span style='width: 93px;\n" +
                    "height: 32px;\n" +
                    "font-size: 24px;\n" +
                    "font-family: Microsoft YaHei, Microsoft YaHei;\n" +
                    "font-weight: 400;\n" +
                    "color: #333333;\n" +
                    "line-height: 28px;'>" + year + "</span><span style='color: #909399;\n" +
                    "    font-weight: 400;'>/" + month + "/" + day + "</span>";*/
            },

            /**
             * 渲染底部
             */
            footer(){
                $('#footer').load("/home/footer");
            },
            /**
             * 获取下载总量
             */
            getNumAll() {
                that_ = this;
                $.post(this.getnumall, {}, function (data) {
                    that_.numall = data.data;
                })
            },
            /**
             * 跳转到产品浏览界面
             */
            gotobrowseHP() {
                $("#test").load("/home/productBrowsing/browseHP")
            }
        }
    })
    function sz(){
        $('#test').load("/home/productBrowsing/browseHP");
        // 设置键名为"id"，保存到缓存
        sessionStorage.setItem("type", "N");
    }
   function zh(){
       $('#test').load("/home/productBrowsing/browseHP");
       // 设置键名为"id"，保存到缓存
       sessionStorage.setItem("type", "A");
   }
   function fx(){
       $('#test').load("/home/productBrowsing/browseHP");
       // 设置键名为"id"，保存到缓存
       sessionStorage.setItem("type", "R");
   }
</script>

<script>
    //样式事件
    //第一个球
    $(".notice01").on('mouseenter', function () {
        // 当鼠标进入指定元素时触发的操作
        $("#qiu1").css("border-color", "#0B89FD")
    });
    $('.notice01').on('mouseout', function () {
        // 当鼠标从元素上移开时触发的操作
        $("#qiu1").css("border-color", "#777777")
    });
    //第二个球
    $(".notice02").on('mouseenter', function () {
        // 当鼠标进入指定元素时触发的操作
        $("#qiu2").css("border-color", "#0B89FD")
    });
    $('.notice02').on('mouseout', function () {
        // 当鼠标从元素上移开时触发的操作
        $("#qiu2").css("border-color", "#777777")
    });
    //第三个球
    $(".notice03").on('mouseenter', function () {
        // 当鼠标进入指定元素时触发的操作
        $("#qiu3").css("border-color", "#0B89FD")
    });
    $('.notice03').on('mouseout', function () {
        // 当鼠标从元素上移开时触发的操作
        $("#qiu3").css("border-color", "#777777")
    });
    //第四个球
    $(".notice04").on('mouseenter', function () {
        // 当鼠标进入指定元素时触发的操作
        $("#qiu4").css("border-color", "#0B89FD")
    });
    $('.notice04').on('mouseout', function () {
        // 当鼠标从元素上移开时触发的操作
        $("#qiu4").css("border-color", "#777777")
    });
    //上一页
    $(".zjt").on('mouseenter', function () {
        // 当鼠标进入指定元素时触发的操作
        $(".zjt").css("background-color", "#0B89FD")
    });
    $('.zjt').on('mouseout', function () {
        // 当鼠标从元素上移开时触发的操作
        $(".zjt").css("background-color", "#EFEFEF")
    });
    //下一页
    $(".yjt").on('mouseenter', function () {
        // 当鼠标进入指定元素时触发的操作
        $(".yjt").css("background-color", "#0B89FD")
    });
    $('.yjt').on('mouseout', function () {
        // 当鼠标从元素上移开时触发的操作
        $(".yjt").css("background-color", "#EFEFEF")
    });

//简介触发
   /* $("#jjkp1").on('mouseenter', function () {
        // 当鼠标进入指定元素时触发的操作
        $("#jjkp11").css("display", "block")
        $("#ptts1").css("margin-top","51%")
    });
    $('#jjkp1').on('mouseout', function () {
        // 当鼠标从元素上移开时触发的操作
        $("#jjkp11").css("display", "none")
        $("#ptts1").css("margin-top","61%")
    });
    $("#jjkp2").on('mouseenter', function () {
        // 当鼠标进入指定元素时触发的操作
        $("#jjkp22").css("display", "block")
        $("#ptts2").css("margin-top","51%")
    });
    $('#jjkp2').on('mouseout', function () {
        // 当鼠标从元素上移开时触发的操作
        $("#jjkp22").css("display", "none")
        $("#ptts2").css("margin-top","61%")
    });*/
</script>
<style>
    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 380px;
    }

    .zjt {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 30px;
        background-image: url(./img/zjt.png);
        height: 30px;
        border: 0px;
        border-radius: 20px;
    }

    .yjt {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 30px;
        background-image: url(./img/yjt.png);
        height: 30px;
        border: 0px;
        border-radius: 20px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .btntz {
        width: 100%;
    }

    .tzdiv {
        height: 70px;
    }

    .nr {
        color: #373d41;
        text-align: left;
        padding: 14px 14px 0 14px;
        font-size: 16px;
    }

    .sj {
        margin-top: 46px;
        height: 30px;
    }

    .cpjs {
        display: flex;
        justify-content: center; /* 在主轴上居中对齐 */
        align-items: center; /* 在交叉轴上居中对齐 */
    }

    .cpjs div {
        justify-content: center; /* 在主轴上居中对齐 */
        align-items: center; /* 在交叉轴上居中对齐 */
    }

    .el-divider {
        margin-top: 50px !important;
        margin-bottom: 50px !important;
    }

    .qiu {
        /*width: 20px;
        height: 20px;
        background-color: blue;
        position: absolute;*/

        margin: 3px 250px 0px 32px;
        border-radius: 10px;
        width: 20px;
        height: 20px;
        border-color: #777;
    }

    .tzlx {
        background: linear-gradient(to right, #2b95f3, #ffffff);
        border: 0px;
        margin: 100px 219px 0px -2px;
        width: 85px;
        height: 24px;
        border-color: #777;
        color: #0069d7;
    }

    .kp {
        width: 200px;
        height: 120px;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        margin: 34px 143px 0px -47px;
        width: 200px;
        height: 120px;

    }

    .kp1 {
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
        opacity: 1;
        width: 300px;
        height: 120px;

    }

    .zt {
        margin: 18px;
        width: 172px;
        height: 49px;
        font-size: 14px;
        color: black;
    }

    .zt1 {
        margin: 12px 9px 8px 9px;
        font-size: 12px;
    }

    .rq {
        margin: 0px 204px 0px 0px;
        border: 0px;
        width: 0px;
        height: 24px;
        border-color: #777;
    }

    .cpjskpt {
        width: 380px;
        height: 99px;
        border-radius: 10px 10px 0px 0px;
    }

    .cpjskp {
        width: 380px;
        height: 72px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        font-size: 18px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 21px;
        display: flex; /* 设置为flex容器 */
        justify-content: center; /* 水平居中对齐 */
        align-items: center; /* 垂直居中对齐 */
    }

    .cp {
        width: 144px;
        height: 32px;
        font-size: 24px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 28px;
        -webkit-background-clip: text;
        margin: -62px 0px 0px 35px;
    }

    .xbk {
        border-bottom: 1px solid #d8d8d8;
    }

    .jjkp {
        width: 584px;
        height: 385px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin: 6% 5% 2% 4%;
    }
    .ptts{
        border-radius: 10px 10px 0px 0px;
        width: 100%;background-color: #fffbe6;margin-top: 51%;height: 51px;opacity: 0.85;
    }
    .pttszt{
        margin: -22px 0px 22px 26px;
        font-size: 20px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        color: #0B89FD;
        line-height: 23px;
    }
    .ztcx{
        margin-top: 65px;
        margin-left: 50px;
        font-size: 24px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 28px;
    }
    .ztcxx{
        margin-left: 50px;
        margin-top: 19px;
    }
</style>
</html>

